import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

const myRole = 'banzhuren'

// 全局注册自定义指令（当创建指令的时候，直接书写一个回调函数，这个函数默认是钩子函数中的bind）
/* Vue.directive('role', (el, binding) => {
    // 把不符合条件的按钮删除
    if (!binding.value.includes(myRole)) {
        // el.remove();
        // el.parentNode.removeChild(el);
        console.log(el, el.parentNode);
    }
})
 */

/* 
  定义指令的时候，第二个参数可以书写成一个对象，这个对象内可以写多个钩子函数，供不同的逻辑去使用’
*/
Vue.directive('role', {
    /* bind：只调用一次，指令第一次绑定到元素的时候调用，在这里可以进行一次性的初始化设置 */
    bind() {
        console.log('bind');
    },
    /* inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中） */
    inserted(el, binding) {
        console.log("inserted");
        if (!binding.value.includes(myRole)) {
            // el.remove()
            el.parentNode.removeChild(el)
            // console.log(el, el.parentNode);
        }
    },

    /*
      update：所在组件的 VNode更新的时候调用，但是可能发生在其子 VNode更新之前 
     */
    update() {
        console.log('update');
    },

    /* 
      componentUpdate：指令所在组件的VNode及其子 VNode全部更新后调用
    */
    componentUpdate() {
        console.log('componentUpdate');
    },

    /* unbind：只调用一次，指令与元素解绑的时候调用 */
    unbind() {
        console.log('unbind');
    }
})


new Vue({
    render: h => h(App)
}).$mount('#app')